<template>
  <div>
    <common-head title="详情页"></common-head>
    <div class="wrap">
      <div class="banner">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item v-for="banner in pics" :key="banner.id">
            <img :src="banner.pic" alt="">
          </van-swipe-item>
        </van-swipe>
      </div>
      <div class="title">{{basicInfo.name}}</div>
      <div class="content" v-html="content"></div>
    </div>
     <div class="good-action">
        <van-goods-action>
          <van-goods-action-icon icon="home-o" text="首页" />
          <van-goods-action-icon icon="shop-o" text="店铺" />
          <van-goods-action-button color="#be99ff" type="warning" text="加入购物车"  @click="showPopup" />
          <van-goods-action-button color="#7232dd" type="danger" text="立即购买"  @click="showPopup" />
        </van-goods-action>
        <van-popup v-model="show" position="bottom" closeable :style="{ height: '30%' }">
          <van-card
            :num="sku.number"
            :price="sku.minPrice"
            :title="sku.name"
            :thumb="sku.pic"
          >
            <template #footer>
              <van-stepper v-model="sku.number"/>
            </template>
          </van-card>
          <van-button size="large" round type="info">确认</van-button>
        </van-popup>
      </div>
  </div>
</template>

<script>
import CommonHead from '@components/CommonHead'
import { fetchDetails } from '@api'
export default {
  components: {
    CommonHead
  },
  data () {
    return {
      basicInfo: {},
      content: '',
      pics: [],
      sku: {
        number: 1
      },
      show: false
    }
  },
  created () {
    this.getBanner()
  },
  methods: {
    getBanner (id) {
      fetchDetails({
        id: this.$route.query.id
      }).then(res => {
        if (res.data.code === 0) {
          this.basicInfo = res.data.data.basicInfo
          this.content = res.data.data.content.replace(/<img/gi, '<img style="display:block;width:100%"')
          this.pics = res.data.data.pics
          this.sku = { ...this.sku, ...res.data.data.basicInfo }
        }
      })
    },
    showPopup () {
      this.show = !this.$isShow
    }
  }
}
</script>

<style lang="scss" scoped>
.wrap{
  padding-bottom: 40px;
  .banner{
    img{
      width: 100%;
    }
  }
  .title{
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    padding: 15px 0;
  }
}
</style>
